Welcome to my website
This is the English version of my page. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Bienvenidos a mi sitio web
Esta es la versión en Español de mi página. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
revision:
Click on the buttons below to change the language of the webpage.
Welcome to the this webpage. Default language is English. But you can choose any language using the buttons above!
<div>
<button onclick="changeLanguage('eng')">Change to English</button>
<button onclick="changeLanguage('esp')">Change to Spanish</button>
<button onclick="changeLanguage('ndl')">Change to Dutch </button>
<p id="content"> Welcome to the this webpage. Default language is English. But you can choose any
language using the buttons above! </p>
</div>
<style>
button{cursor: pointer;}
</style>
<script>
function changeLanguage(lang) {
location.hash = lang;
location.reload();
}
// Define the language reload anchors
var language = {
eng: {
welcome: "Welcome to this webpage!" + " Default language is English " +
" But you can chose any language using the buttons above!"
},
es: {
welcome: "¡Bienvenido al portal! " +
"¡Puedes elegir cualquier idioma usando " +
"los botones de arriba!"
},
ndl: {
welcome: "Welkom op deze website!" +
" U kunt om het even welke taal kiezen" +
" door gebruik te maken van de knoppen hierboven!"
}
};
// Check if a hash value exists in the URL
if (window.location.hash) {
// Set the content of the webpage depending on the hash value
if (window.location.hash == "#esp") {
content.textContent = language.es.welcome;
}
else if (window.location.hash == "#ndl") {
content.textContent = language.ndl.welcome;
}
}
</script>
Click the respective buttons to make the texts disappear and reappear (= toggle)
<div>
<button id="een" onclick="Nederlands()">Nederlands</button>
<button id="twee" onclick="English()">English</button>
<button id="drie" onclick="Chinese()">Chinese</button>
<div id="nederlands" style="display:block;">Dit is een tekst in het Nederlands.</div>
<div id="english" style="display:block;">This is a text in English.</div>
<div id="chinese" style="display:block;">这是中文文本.</div>
</div>
<script>
function Nederlands() {
let nl = document.getElementById("nederlands");
nl.style.display == "block" ? nl.style.display = "none" : nl.style.display = "block";
}
function English() {
let en = document.getElementById("english");
en.style.display == "block" ? en.style.display = "none" : en.style.display = "block";
}
function Chinese() {
let cn = document.getElementById("chinese");
cn.style.display == "block" ? cn.style.display = "none" : cn.style.display = "block";
}
</script>
Click the respective buttons to make the texts disappear and reappear (= toggle)
<div class="spec">
<button onclick="Nederlands1()">Nederlands</button>
<button onclick="English1()">English</button>
<button onclick="Chinese1()">Chinese</button>
<div class="nederlands" style="display:block;">Dit is een tekst in het Nederlands.</div>
<div class="english" style="display:block;">This is a text in English.</div>
<div class="chinese" style="display:block;">这是中文文本.</div>
</div>
<script>
function Nederlands1() {
let nl = document.getElementsByClassName("nederlands")[0];
nl.style.display == "block" ? nl.style.display = "none" : nl.style.display = "block";
}
function English1() {
let en = document.getElementsByClassName("english")[0];
en.style.display == "block" ? en.style.display = "none" : en.style.display = "block";
}
function Chinese1() {
let cn = document.getElementsByClassName("chinese")[0];
cn.style.display == "block" ? cn.style.display = "none" : cn.style.display = "block";
}
</script>
Click the respective buttons to make the texts disappear and reappear (= toggle)
<div>
<button id="zeven" onclick="Nederlands2()">Nederlands</button>
<button id="acht" onclick="English2()">English</button>
<button id="negen" onclick="Chinese2()">Chinese</button>
<div class="nederlands2" style="display:block;">Dit is een tekst in het Nederlands.</div>
<div class="english2" style="display:block;">This is a text in English.</div>
<div class="chinese2" style="display:block;">这是中文文本.</div>
<div class="nederlands2" style="display:block;">Dit is een tweede tekst in het Nederlands.</div>
<div class="english2" style="display:block;">This is a second text in English.</div>
<div class="chinese2" style="display:block;">这是第二篇中文课文.</div>
<div class="nederlands2" style="display:block;">Dit is een derde tekst in het Nederlands.</div>
<div class="english2" style="display:block;">This is a third text in English.</div>
<div class="chinese2" style="display:block;">这是第三篇中文课文.</div>
</div>
<script>
function Nederlands2() {
let nl = document.getElementsByClassName("nederlands2");
nl[0].style.display == "block" ? nl[0].style.display = "none" : nl[0].style.display = "block";
nl[1].style.display == "block" ? nl[1].style.display = "none" : nl[1].style.display = "block";
nl[2].style.display == "block" ? nl[2].style.display = "none" : nl[2].style.display = "block";
// nl[3].style.color = "red";
}
function English2() {
let en = document.getElementsByClassName("english2");
en[0].style.display == "block" ? en[0].style.display = "none" : en[0].style.display = "block";
en[1].style.display == "block" ? en[1].style.display = "none" : en[1].style.display = "block";
en[2].style.display == "block" ? en[2].style.display = "none" : en[2].style.display = "block";
// en[3].style.color = "yellow";
}
function Chinese2() {
let cn = document.getElementsByClassName("chinese2");
cn[0].style.display == "block" ? cn[0].style.display = "none" : cn[0].style.display = "block";
cn[1].style.display == "block" ? cn[1].style.display = "none" : cn[1].style.display = "block";
cn[2].style.display == "block" ? cn[2].style.display = "none" : cn[2].style.display = "block";
// cn[3].style.color = "black";
}
</script>
This is the English version of my page. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Esta es la versión en Español de mi página. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
code:
<div>
<header>
<nav>
<ul>
<li><a href="#english">English</a></li>
<li><a href="#spanish">Español</a></li>
</ul>
</nav>
</header>
<main>
<section id="english">
<h4>Welcome to my website</h4>
<p>This is the English version of my page. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</section>
<section id="spanish">
<h4>Bienvenidos a mi sitio web</h4>
<p>Esta es la versión en Español de mi página. Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</section>
</main>
</div>
<script>
const englishSection = document.getElementById('english');
const spanishSection = document.getElementById('spanish');
const englishLink = document.querySelector('header nav ul li:first-child a');
const spanishLink = document.querySelector('header nav ul li:last-child a');
englishLink.addEventListener('click', showEnglish);
spanishLink.addEventListener('click', showSpanish);
function showEnglish(event) {
event.preventDefault();
englishSection.style.display = 'block';
spanishSection.style.display = 'none';
}
function showSpanish(event) {
event.preventDefault();
spanishSection.style.display = 'block';
englishSection.style.display = 'none';
}
</script>
code:
<div>
<header class="two">
<nav>
<ul>
<li><a id="home-link" href="#">Home</a></li>
<li><a id="about-link" href="#">About Us</a></li>
<li><a id="contact-link" href="#">Contact</a></li>
</ul>
</nav>
<select id="language-selector">
<option value="en">English</option>
<option value="fr">Français</option>
<option value="es">Español</option>
</select>
</header>
<main>
<h4 id="welcome-message">Welcome</h4>
</main>
</div>
<style>
.two nav ul { list-style: none; padding: 0; display: flex; gap: 10px;}
.two nav ul li a {text-decoration: none; color: #333;}
#language-selector {margin-left: 20px;}
</style>
<script>
// Load language files
const translations = {
en: { welcome: "Welcome", home: "Home", about: "About Us", contact: "Contact" },
fr: { welcome: "Bienvenue", home: "Accueil", about: "À propos de nous", contact: "Contact"},
es: { welcome: "Bienvenido", home: "Inicio", about: "Sobre nosotros", contact: "Contacto"}
};
// Function to update the page content based on the selected language
function updateContent(lang) {
document.getElementById('welcome-message').textContent = translations[lang].welcome;
document.getElementById('home-link').textContent = translations[lang].home;
document.getElementById('about-link').textContent = translations[lang].about;
document.getElementById('contact-link').textContent = translations[lang].contact;
}
// Event listener for language selector
document.getElementById('language-selector').addEventListener('change', function(event) {
const selectedLang = event.target.value;
updateContent(selectedLang);
});
// Initialize the page with the default language (English)
updateContent('en');
// Save the selected language to localStorage
document.getElementById('language-selector').addEventListener('change', function(event) {
const selectedLang = event.target.value;
localStorage.setItem('selectedLanguage', selectedLang);
updateContent(selectedLang);
});
// Load the saved language from localStorage on page load
window.onload = function() {
const savedLang = localStorage.getItem('selectedLanguage') || 'en';
document.getElementById('language-selector').value = savedLang;
updateContent(savedLang);
};
async function loadTranslations(lang) {
const response = await fetch(`/${lang}.json`);
return await response.json();
}
document.getElementById('language-selector').addEventListener('change', async function(event) {
const selectedLang = event.target.value;
const translations = await loadTranslations(selectedLang);
updateContent(translations);
});s
</script>